Highcharts এ বিভিন্ন ধরনের Built-in Themes উপলব্ধ, যা আপনাকে দ্রুত এবং সহজে আকর্ষণীয় এবং পেশাদার গ্রাফিক্যাল ইন্টারফেস তৈরি করতে সহায়ক। থিমগুলি আপনার চার্টের রঙ, স্টাইল এবং উপস্থাপনা কাস্টমাইজ করতে সাহায্য করে। এটি আপনাকে চার্টের একটি সাধারণ ডিজাইন থেকে উন্নত, ব্র্যান্ডিং-অনুকূল ডিজাইনে পরিবর্তন করতে সক্ষম করে।
Highcharts এর Built-in Themes
Highcharts এর Built-in Themes আপনার চার্টের ডিজাইনকে তাত্ক্ষণিকভাবে পরিবর্তন করতে সক্ষম করে। এগুলি কিছু পূর্বনির্ধারিত রঙ এবং স্টাইল সেট প্রদান করে, যা সহজেই আপনার চার্টের চেহারা বদলে দেয়। এখানে কিছু সাধারণ থিমের উদাহরণ:
1. Dark Unica
Dark Unica থিমটি গা dark ় ব্যাকগ্রাউন্ড এবং উজ্জ্বল রঙের স্টাইল প্রদান করে। এটি সাধারণত ব্যবহার করা হয় যখন আপনি একটি ডার্ক স্কিমের চার্ট চান, যা আধুনিক এবং পেশাদার মনে হয়।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#2a2a2a',
style: {
color: '#FFFFFF'
}
},
title: {
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#FFFFFF'
}
},
// আরও কাস্টমাইজেশন
});
2. Grid Light
Grid Light থিমটি হালকা ব্যাকগ্রাউন্ডে কাজ করে এবং পিউর শেড ব্যবহার করে। এটি সাধারণত লাইট স্কিমের সঙ্গে ব্যবহার করা হয় এবং ব্যবসায়িক বা কনফারেন্স প্রেজেন্টেশনের জন্য উপযুক্ত।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#FFFFFF',
style: {
color: '#000000'
}
},
title: {
style: {
color: '#333333',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#666666'
}
},
// আরও কাস্টমাইজেশন
});
3. High Contrast
High Contrast থিমটি ডিজাইনে উচ্চ কনট্রাস্ট ব্যবহার করে এবং এটিতে সাধারণত রঙের সাদা এবং কালো শেড থাকে। এটি অন্ধকার বা লাইট স্কিমের মধ্যে পরিষ্কার পার্থক্য তৈরি করতে সাহায্য করে।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#000000',
style: {
color: '#FFFFFF'
}
},
title: {
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#DDDDDD'
}
},
// আরও কাস্টমাইজেশন
});
4. Sand Signika
Sand Signika থিমটি প্রাকৃতিক রঙের শেড ব্যবহার করে এবং এটি একটি সফট এবং সহজ ডিজাইন তৈরি করতে সহায়ক। এটি বিশেষভাবে লাইট এবং ন্যাচারাল টোনের জন্য উপযুক্ত।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#f4f4f4',
style: {
color: '#000000'
}
},
title: {
style: {
color: '#444444',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#666666'
}
},
// আরও কাস্টমাইজেশন
});
5. Metro
Metro থিমটি আধুনিক ডিজাইন স্টাইল অনুসরণ করে এবং এটি সাধারণত সাইট বা অ্যাপ্লিকেশন ডিজাইন করার সময় ব্যবহার করা হয়, যেখানে মেট্রো ডিজাইন স্টাইল প্রাধান্য পায়।
Highcharts.setOptions(Highcharts.theme = {
chart: {
backgroundColor: '#F0F0F0',
style: {
color: '#333333'
}
},
title: {
style: {
color: '#0066CC',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: '#3399FF'
}
},
// আরও কাস্টমাইজেশন
});
Highcharts এ Built-in Themes ব্যবহার কিভাবে করবেন?
Highcharts এ Built-in Themes ব্যবহার করতে হলে, আপনাকে Highcharts.setOptions() ফাংশন ব্যবহার করে থিমটি সিলেক্ট করতে হবে। এটি আপনার সমস্ত চার্টের জন্য ঐক্যবদ্ধভাবে থিমটি প্রয়োগ করবে। থিম সেট করতে, আপনাকে থিম কোডটি আপনার Highcharts স্ক্রিপ্টে যুক্ত করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Built-in Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.setOptions({
chart: {
type: 'line'
},
title: {
text: 'উদাহরণ চার্ট'
},
series: [{
name: 'Sales',
data: [1, 3, 2, 4, 6, 8]
}]
});
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Built-in Theme Example'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50, 60]
}]
});
</script>
</body>
</html>
এখানে Highcharts.setOptions() এর মাধ্যমে আপনি Built-in Theme সেট করতে পারেন। এটি আপনার চার্টে স্বয়ংক্রিয়ভাবে প্রয়োগ হবে।
উপসংহার
Built-in Themes Highcharts এ একটি শক্তিশালী ফিচার, যা আপনাকে দ্রুত এবং সহজে আপনার চার্টের ডিজাইন কাস্টমাইজ করতে দেয়। Highcharts এ বিভিন্ন থিম যেমন Dark Unica, Grid Light, High Contrast, Sand Signika, এবং Metro উপলব্ধ রয়েছে। এই থিমগুলির মাধ্যমে আপনি আপনার চার্টের রঙ, শৈলী এবং উপস্থাপনাকে দ্রুত পরিবর্তন করতে পারবেন এবং একই সাথে একটি সুন্দর ও প্রফেশনাল লুক তৈরি করতে পারবেন।
Read more
